<template lang="">
    <div>
        <h2>{{msg}}</h2>
        <h3>学生名称:{{name}}</h3>
        <h3>学生年龄:{{num}}</h3>
        <h3>学生性别:{{sex}}</h3>
        <button @click="addNumber">年龄+1</button>
    </div>
</template>
<script>
export default {
    name:'Student',
    data(){
        return {
           msg:"hhaahhahhaha",
           num:this.age
        }
    },
    methods:{
        addNumber(){
            //props引用的值全部在vc身上，直接this引用即可，当然直接修改prop的值vue会报错 提醒不建议这样改 this.age++;
            this.num++;//拷贝一份数据到data的属性中，修改data的属性即可
        }
    },
    

    //props的简写形式，缺少类型校验
    // props:['name','age','sex'],

    //props的第二种形式 简单的类型校验
    props:{
        name:String,
        age:Number,
        sex:String
    }

    //props的完整形式，添加类型校验
    // props:{
    //     name:{
    //         type:String,
    //         default:"张三"
    //     },
    //     age:{
    //         type:Number,
    //         default:18
    //     },
    //     sex:{
    //         type:String,
    //         default:"男"
    //     }
    // }

}
</script>
<style lang="">
    
</style>